<template>
  <div class="home">
    <!-- 顶部搜索 -->
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in ViewpagerData" :key="item.id">
        <img
          :src="`http://liufusong.top:8080${item.imgSrc}`"
          :alt="item.alt"
          style="width: 100%; height: 212px"
      /></van-swipe-item>
    </van-swipe>
    <!-- 功能分类 -->
    <div class="am-flexbox" :column-num="4">
      <van-grid :border="false">
        <van-grid-item>
          <van-image :src="require('@/assets/sc/zhengzu.png')" width="75%" />
          <p class="title">整租</p>
        </van-grid-item>
        <van-grid-item>
          <van-image :src="require('@/assets/sc/hezu.png')" width="75%" />
          <p class="title">合租</p>
        </van-grid-item>
        <van-grid-item>
          <van-image :src="require('@/assets/sc/zhaofang.png')" width="75%" />
          <p class="title">地图找房</p>
        </van-grid-item>
        <van-grid-item to="/rent/add">
          <van-image :src="require('@/assets/sc/chuzu.png')" width="75%" />
          <p class="title">去出租</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 租房小组 -->
    <div class="renting-group">
      <van-grid
        gutter="10"
        class="rent-wrap"
        :column-num="2"
        :center="false"
        :border="false"
        width="50%"
        height="50%"
      >
        <van-cell title="租房小组" value="更多" width="50%" height="50%" />
        <van-grid-item
          v-for="item in RentGroupData"
          :key="item.id"
          width="50%"
          height="50%"
        >
          <van-image
            :src="'http://liufusong.top:8080' + `${item.imgSrc}`"
            height="50"
            width="50"
          />
          <div class="info">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </van-grid-item>
        <van-cell />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getViewpager } from "@/API/user";
import { getRentGroup } from "@/API/user";
export default {
  name: "article-page",
  data() {
    return {
      ViewpagerData: [],
      RentGroupData: [],
    };
  },
  methods: {},
  async created() {
    const { body } = await getViewpager();
    this.ViewpagerData = body;

    const { body: data } = await getRentGroup();
    this.RentGroupData = data;
    console.log(data);
  },
};
</script>

<style lang="less" scoped>
// 轮播图
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 212px;
  line-height: 150px;
  text-align: center;
  background-color: #efefef;
}
// 功能分类
.am-flexbox {
  margin-top: 8px;
  .title {
    font-size: 14px;
  }
}
// 租房小组
.renting-group {
  background-color: #f6f5f6;
  height: 175px;
}
</style>
